<template>
  <div>
    <h1 id="title" ref="title">{{msg}}</h1>
    <button @click="showDOM">点我获取dom</button>
    <School ref="sch"></School>
    <!--:age  v-bind:age   传进来的值就是""内的值，进行类型判断，不使用: 所有值都按字符串处理-->
    <!--props配置中对age做了类型限制，不传数字类型会报错-->
    <Student name="姚文昕" :age="21" className="21移动互联网大专2班"></Student><!--使用props属性复用组件，在标签体内传值，组件内定义props-->
  </div>
</template>

<script>
  import Student from "@/components/Student"
  import School from "@/components/School"
  export default {
    name: "App",
    data(){
      return{
        msg:'Hello World!'
      }
    },
    components:{
      School,Student
    },
    methods:{
      showDOM(){
        //原生获取dom
        // console.log(document.getElementById("title"))
        //使用ref属性获取DOM
        // console.log(this.$refs.title)
        //使用ref在组件标签获取到的是该组件的VueComponent
        console.log(this.$refs.sch)
      }
    }
  }
</script>

<style scoped>
</style>